<template>  
	<template v-for='(v,i) in data' :key='i'>
		<template v-if='fn.hasObject(v)'>
			<template v-if='!v.hide'>
				<div class='ex' v-if='v.type === null'></div>
				<FormItem
					v-else
					:label 	= 'v.label'
					:name 	= 'v.name'
				>
					<Select
						v-if 			= 'v.type === "select"'  
						v-model:value 	= 'form[v.name]'
						:data 			= 'v.data'
						:disabled 		= 'loading'
						:api 			= 'v.api'
						:param 			= 'v.param'
						:paging 		= 'v.paging'
						:idStr 			= 'v.idStr'
						:nameStr 		= 'v.nameStr'
						:name 			= 'v.name'
						:width 			= 'v.width ?? 150'
						:p 				= "setHolder(v,1)"
						:cache 			= "setName(v, 'cache')"
						@change 		= 'onChange($event, v)'
						@getData 		= 'v.getData'
					/>
					<DatePicker 
						v-else-if 		= "v.type === 'date' || v.type === 'date-range'" 
						:type 			= 'v.type'
						v-model:value 	= 'form[v.name]'
						:width 			= "v.type === 'date-range' ? (!v.format ? 210 : 310) : width"
						:disabled 		= 'loading' 
						:p 				= "setHolder(v,1)"
						:format 		= 'v.format'
						:start 			= 'v.start'
						:end 			= 'v.end'
						:after 			= 'v.after'
						:before 		= 'v.before'
						:today 			= 'v.today'
						@change 		= 'onChange($event, v)'
					/>
					<TreeSelect
						v-else-if 		= "v.type === 'tree-select'"  
						v-model:value 	= 'form[v.name]' 
						:width 			= 'v.width ?? width'
						:data 			= 'v.data' 
						:api 			= 'v.api'
						:idStr 			= 'v.idStr'
						:nameStr 		= 'v.nameStr'
						:p 				= "setHolder(v,1)"
						:cache 			= "setName(v, 'cache')"
						:multiple 		= 'v.mul'
						@change 		= 'onChange($event,v)'
					/>
					<SelectMore
						v-else-if	  	= "v.type === 'select-more'"  
						v-model:value 	= 'form[v.name]'
						:label 			= 'v.label'
						:idStr 			= 'v.idStr'
						:data 			= 'v.data'
						:api 			= 'v.api'
						:defValue 		= 'v.value'
						:def 			= 'v.def'
						:count 			= 'v.count'
						:nameStr 		= 'v.nameStr'
						@getData 		= 'v.getData'
						@change 		= 'onChange($event,v)'
						:size 			= 'config.size'
					/>
					<Input 
						v-else 
						v-model:value 	= 'form[v.name]' 
						:disabled 		= 'loading' 
						:width 			= 'v.width ?? 150'
						:p 				= 'setHolder(v)'
						:icon 			= 'v.icon'
						:imgIcon 		= 'v.imgIcon'
						:size 			= 'config.size'
					/>
				</FormItem>
			</template>
		</template>
	</template>
</template>

<script setup>
	import { DownCircleOutlined } from '@ant-design/icons-vue'
	/* --------------------------- Component --------------------------- */
	const FormItem 		= $.lazy(()=>import('@antd/form/layout/form-item.vue'))
	const Input 		= $.lazy(()=>import('@antd/form/input.vue'))
	const Select 		= $.lazy(()=>import('@antd/form/select.vue'))
	const SelectMore 	= $.lazy(()=>import('#cpt/form-element/select-more.vue'))
	const DatePicker 	= $.lazy(()=>import('@antd/form/date-picker.vue'))
	const TreeSelect 	= $.lazy(()=>import('@antd/tree/tree-select.vue'))
	/* --------------------------- Inner Component --------------------------- */
	const props = defineProps({
		data	: { type: Array, default: [] },
		form	: Object,
		loading	: Boolean,
		width	: Number,
		config	: { type: Object, default: {} },
		formRef	: Object
	})
	
	const fn = $fn
	
	//
	const onChange = ($event, value) => {
		// props.formRef.submit()
	}
	
	const setName = (v, name) => {
		const { config } = props
		if($fn.isValid(v[name])){
			return v[name]
		}else if($fn.isValid(config[name])){
			return config[name]
		}else {
			return props[name]
		}
	}
	
	// 设置输入提示
	const setHolder = ({ p, label = '' }, flag) => {
		const prefix = flag ? '请选择' : '请输入'
		let holder = prefix + label
		if( flag ){
			holder = label.includes(prefix) ? label : holder
		}
		return p ? p : holder
	}
</script>